<template>
  <div>
    <input v-model="value" placeholder="搜索商品" @search="onSearch"/>
    <div class="h6">历史搜索</div>
    <div class="button-head">
      <button class="button" type="default" data-value="职业照" @click="onTap()" custom-style="width: 100px;">职业照</button>
    </div>
    <div class="h6">猜你想搜</div>
    <div class="button-footer">
      <button class="button" type="default" data-value="清凉照" @click="onTap()" custom-style="width: 100px;">清凉照</button>
      <button class="button" type="default" data-value="自拍照" @click="onTap()" custom-style="width: 100px;">自拍照</button>
      <button class="button" type="default" data-value="文艺照" @click="onTap()" custom-style="width: 100px;">文艺照</button>
      <button class="button" type="default" data-value="咖啡馆照" @click="onTap()" custom-style="width: 100px;">咖啡馆照</button>
      <button class="button" type="default" data-value="旅游照" @click="onTap()" custom-style="width: 100px;">旅游照</button>
    </div>
  </div>
</template>


<script>
	export default {
 data() {
    return {
	  searchValue: '', // 用于存储输入框的值
      value: '',
      list: [/*...*/],
      items: [/*...*/],
      filteredItems: [],
    }
  },
  methods: {
    onSearch(value) {
      // 搜索逻辑
    },
    onClickButton(value) {
      this.value = value;
      this.onSearch(value);
    },
    handleItemClick(id) {
      this.filteredItems = this.items.filter(item => item.type === id);
    },
			onTap: function(item) {
				uni.navigateTo({
				  url: '/pages/hot/home/home',
				});
			},
    onTaps(item) {
      this.$router.push({ path: '/detail', query: { id: item.id } });
    },
    onTapa() {
      this.$router.push('/cate');
    },
    goToShoppingCart() {
      this.$router.push('/cate');
    }
  },
  mounted() {
    this.filteredItems = this.items.filter(item => item.type === 2);
  }
	}
</script>

<style>
/* pages/search/search.wxss */
button{
	  width: 30%;
	  text-align: center;
}
.button{
  width: 30%;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  margin: 8px 3px;

}
.button-head{
  display: flex;
  flex-wrap: wrap;
}
.button-footer{
  display: flex;
  flex-wrap: wrap;
}
.h6{
  margin: 10px 0;
}

</style>
